Hi All,
I'm trying to present a list of short text items in an inline style,
flowing over more than one line if necessary. Each item should be in a
fixed-width box. The following code does most of what I want except
for the fact that the list item width isn't honoured and the items
that flow onto the second and subsequent lines actually overlap the
first line (because the top-margin isn't being honoured).
<html>
<head>
<title>Joblist</title>
<style>
#joblist {
list-style: none;
margin-left: 5%;
width: 80%;
border: 1px solid #ccc;
padding: 5px 5px;
}
#joblist li {
display: inline;
border: 1px solid gray;
background-color: #eee;
padding: 2px 5px;
margin: 2px 5px;
width: 75px;
}
</style>
</head>
<body>
<ul id="joblist">
<li>FTD21</li>
<li>MSD10</li>
<li>SAD01</li>
<li>SAD13</li>
<li>SAD59</li>
<li>SAD64</li>
<li>SAD69</li>
<li>SAD70</li>
<li>SKD*</li>
<li>SKW*</li>
<li>STD63</li>
<li>STD64</li>
<li>TRD04</li>
<li>TRD07</li>
<li>TRD19</li>
<li>RMD196</li>
</ul <!-- joblist -->
</body>
</html>
If you remove the "display: inline;" instruction you'll see the kind
of effect I'm after but without the actual inline behaviour.
Can anyone suggest a reason why I'm getting this result?
Thanks
Steve
